$class-prefix-dialog: rt-dialog;

.#{$class-prefix-dialog} {

  ---z-index: var(--rt-dialog-z-index, 1000);

  &.rt-center-popup {
    --z-index: var(---z-index);
  }
}

.#{$class-prefix-dialog}-body {
  width: 100%;
  max-height: 50vh;
  font-size: var(--rt-size-14);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  > * {
    flex: none;
  }
  > .#{$class-prefix-dialog}-content {
    flex: auto;
  }

  &:not(.#{$class-prefix-dialog}-with-image) {
    padding-top: 20px;
  }
}

.#{$class-prefix-dialog}-image-container {
  margin-bottom: 12px;
  max-height: 20vh;
  overflow-y: auto;
}

.#{$class-prefix-dialog}-header {
  margin-bottom: 8px;
  padding: 0 12px;
}

.#{$class-prefix-dialog}-title {
  margin-bottom: 8px;
  padding: 0 12px;
  font-weight: bold;
  font-size: var(--rt-size-16);
  line-height: 25px;
  text-align: center;
}

.#{$class-prefix-dialog}-content {
  padding: 0 12px 20px;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: var(--rt-size-12);
  line-height: 1.4;
  color: var(--rt-color-text);
  &-empty {
    padding: 0;
    height: 12px;
  }
}

.#{$class-prefix-dialog}-footer {
  user-select: none;
  .#{$class-prefix-dialog}-action-row {
    display: flex;
    align-items: stretch;
    border-top: 0.5px solid var(--rt-color-border);
    > * {
      flex: 1;
    }
    > .#{$class-prefix-dialog}-button {
      padding: 10px;
      font-size: var(--rt-size-14);
      &-bold {
        font-weight: bold;
      }
      border-right: solid 0.5px var(--rt-color-border);
      &:last-child {
        border-right: none;
      }
    }
  }
}
